<template>
  <div class="productDetails">
    <div class="numDetails">
      <ul>
        <li class="name">{{$route.query.resultTitle}}</li>
        <li class="details">{{$t('ProductDetails.Timetomarket')}}：{{ListingDate}}</li>
        <li class="details">{{$t('ProductDetails.CumulativeSellIn')}}：{{sellNum.sellIn + '' | comdify}}</li>
        <!--<li class="details">{{$t('ProductDetails.CumulativeActivation')}}：{{sellNum.activation + '' | comdify}}</li>-->
      </ul>
    </div>
    <div class="numButton">
      <el-row>
        <div v-for="(item, index) in tags" class="btn" style="margin-top:5px;">
          <el-tooltip class="item" effect="dark" :content="tagTips[index]" placement="top">
            <span>{{item[0]}}</span>
          </el-tooltip>
        </div>
      </el-row>
    </div>
    <div class="fourSelect">
      <el-card>
        <el-row>
          <el-col :span="6">
            <span>GEO</span>
            <el-select v-model="geoValue" multiple collapse-tags  @change="geoChange">
              <el-option
                v-for="item in geoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <span>Country</span>
            <el-select v-model="countryValue" multiple collapse-tags  @change="countryChange">
              <el-option
                v-for="item in countryOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <span>Segment Type</span>
            <el-select v-model="segmentTypeValue" multiple collapse-tags  @change="segmentChange">
              <el-option
                v-for="item in segmentTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <span>MTM</span>
            <el-select v-model="mtmValue" multiple collapse-tags  @change="mtmChange">
              <el-option
                v-for="item in mtmOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="sellIn">
      <el-card>
        <el-row class="sellInActivation">
          <el-col :span="16">
            <div class="title">
              Sell In
            </div>
            <div style="margin-left:283px;margin-top:126px;" v-show="noData.sellInActivation">No Data</div>
            <div class="sell-echarts" id="" v-show="!noData.sellInActivation" v-loading="loading.sellInActivation"></div>
          </el-col>
          <el-col :span="8">
              <el-select v-model="startDate" :placeholder="$t('ProductDetails.srartTime')" @change="changeStartDate">
                <el-option
                  v-for="item in startOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="endDate" :placeholder="$t('ProductDetails.endTime')">
                <el-option
                  v-for="item in endOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            <div class="sellIn number top sell">
              <div class="name">Sell In</div>
              <div class="value">{{sellInActivation.sellIn + '' | comdify}}</div>
            </div>
            <!--<div class="sellIn number">-->
              <!--<div class="name">Activation</div>-->
              <!--<div class="value">{{sellInActivation.activation + '' | comdify}}</div>-->
            <!--</div>-->
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="title2">
              GEO
            </div>
            <div v-show="noData.geo1" style="margin:97px 0 98px 85px;">No Data</div>
            <div class="GeoEcharts1" v-show="!noData.geo1" v-loading="loading.geo1"></div>
          </el-col>
          <el-col :span="8">
            <div class="title2">
              Segment
            </div>
            <div v-show="noData.segment1" style="margin:97px 0 98px 85px;">No Data</div>
            <div class="SegmentEcharts1" v-show="!noData.segment1" v-loading="loading.segment1"></div>
          </el-col>
          <!--<el-col :span="8">-->
            <!--<div class="title2">-->
             <!--&lt;!&ndash;  MTM Distribution &ndash;&gt;-->
            <!--</div>-->
            <!--<div v-show="noData.mtm1" style="margin:97px 0 98px 85px;">No Data</div>-->
            <!--<div class="MtmEcharts1" v-show="!noData.mtm1" v-loading="loading.mtm1"></div>-->
          <!--</el-col>-->
        </el-row>
      </el-card>
    </div>
    <!--<div class="sellIn">-->
      <!--<el-card>-->
        <!--<el-row class="sellInActivation">-->
          <!--<el-col :span="16">-->
            <!--<div class="title">-->
              <!--Activate Speed-->
            <!--</div>-->
            <!--<div style="margin-left:283px;margin-top:126px;" v-show="noData.activateSpeed">No Data</div>-->
            <!--<div class="sell-echarts" id="" v-show="!noData.activateSpeed" v-loading="loading.activateSpeed"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
            <!--<div class="sellIn number top">-->
              <!--<div class="name">Activation Rate</div>-->
              <!--<div class="value">{{acticate.rate + '' | comdify}}%</div>-->
            <!--</div>-->
            <!--<div class="sellIn number">-->
              <!--<div class="name">Avg.Activation Duration</div>-->
              <!--<div class="value">{{acticate.avg + '' | comdify}}</div>-->
            <!--</div>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row :gutter="24">-->
          <!--<el-col :span="8">-->
            <!--<div class="title2">-->
              <!--GEO Distribution-->
            <!--</div>-->
            <!--<div v-show="noData.geo2" style="margin:97px 0 98px 85px;">No Data</div>-->
            <!--<div class="GeoEcharts1" v-show="!noData.geo2" v-loading="loading.geo2"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
            <!--<div class="title2">-->
              <!--Segment Distribution-->
            <!--</div>-->
            <!--<div v-show="noData.segment2" style="margin:97px 0 98px 85px;">No Data</div>-->
            <!--<div class="SegmentEcharts1" v-show="!noData.segment2" v-loading="loading.segment2"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
            <!--<div class="title2">-->
             <!--&lt;!&ndash;  MTM Distribution &ndash;&gt;-->
            <!--</div>-->
            <!--<div v-show="noData.mtm2" style="margin:97px 0 98px 85px;">No Data</div>-->
            <!--<div class="MtmEcharts1" v-show="!noData.mtm2" v-loading="loading.mtm2"></div>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</el-card>-->
    <!--</div>-->
    <!--<div class="sellIn">-->
      <!--<el-card>-->
        <!--<el-row class="sellInActivation">-->
          <!--<el-col :span="16">-->
            <!--<div class="title">-->
              <!--Inventory-->
            <!--</div>-->
            <!--<div style="margin-left:283px;margin-top:126px;" v-show="noData.inventory">No Data</div>-->
            <!--<div class="sell-echarts" id="" v-show="!noData.inventory" v-loading="loading.inventory"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
            <!--<div class="enventory number top">-->
              <!--<div class="name">Inventory</div>-->
              <!--<div class="value">{{inventory.inventory + '' | comdify}}</div>-->
            <!--</div>-->
            <!--<div class="enventory number">-->
              <!--<div class="name">Inventory Age</div>-->
              <!--<div class="value">{{inventory.age + '' | comdify}}</div>-->
            <!--</div>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row :gutter="24">-->
          <!--<el-col :span="8">-->
            <!--<div class="title2">-->
              <!--GEO Distribution-->
            <!--</div>-->
            <!--<div v-show="noData.geo3" style="margin:97px 0 98px 85px;">No Data</div>-->
            <!--<div class="GeoEcharts1" v-show="!noData.geo3" v-loading="loading.geo3"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
            <!--<div class="title2">-->
              <!--Segment Distribution-->
            <!--</div>-->
            <!--<div v-show="noData.segment3" style="margin:97px 0 98px 85px;">No Data</div>-->
            <!--<div class="SegmentEcharts1" v-show="!noData.segment3" v-loading="loading.segment3"></div>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
            <!--<div class="title2">-->
            <!--&lt;!&ndash;   MTM Distribution &ndash;&gt;-->
            <!--</div>-->
            <!--<div v-show="noData.mtm3" style="margin:97px 0 98px 85px;">No Data</div>-->
            <!--<div class="MtmEcharts1" v-show="!noData.mtm3" v-loading="loading.mtm3"></div>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</el-card>-->
    <!--</div>-->
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import {sortObj, getUsername} from '../../../utils/auth'
  import calendar from '../../vue-calendar-master/src/app.vue'
  export default {
    components: {
      calendar
    },
    data () {
      return {
        geoDate: ['EMEA', 'AP', 'LA', 'NA', 'PRC'],
        ListingDate: '',
        geoOptions: [],
        countryOption: [],
        segmentTypeOption: [],
        mtmOption: [],
        geoValue: [],
        countryValue: [],
        segmentTypeValue: [],
        mtmValue: [],
        value: '',
        value1: '',
        eChartsColor: ['#59c4e6', '#b6a2de'],
        startDate: '',
        endDate: '',
        startOptions: [],
        endOptions: [],
        tags: [],
        enTags: [],
        zhTags: [],
        tagTips: [],
        enTagTips: [],
        zhTagTips: [],
        sellNum: {
          sellIn: '',
          activation: ''
        },
        sellInActivation: {
          sellIn: '',
          activation: ''
        },
        acticate: {
          rate: '',
          avg: ''
        },
        inventory: {
          inventory: '',
          age: ''
        },
        echart: {
          sellIn: '',
          GeoEcharts1: '',
          SegmentEcharts1: '',
          MtmEcharts1: '',
          activate: '',
          GeoEcharts2: '',
          SegmentEcharts2: '',
          MtmEcharts2: '',
          inventory: '',
          GeoEcharts3: '',
          SegmentEcharts3: '',
          MtmEcharts3: '',
        },
        noData: {
          sellInActivation: false,
          geo1: false,
          segment1: false,
          mtm1: false,
          activateSpeed: false,
          geo2: false,
          segment2: false,
          mtm2: false,
          inventory: false,
          geo3: false,
          segment3: false,
          mtm3: false
        },
        loading: {
          sellInActivation: false,
          geo1: false,
          segment1: false,
          mtm1: false,
          activateSpeed: false,
          geo2: false,
          segment2: false,
          mtm2: false,
          inventory: false,
          geo3: false,
          segment3: false,
          mtm3: false
        }
      }
    },
    computed: {
      ph_code_product () {
        let ary = []
        ary.push(this.$route.query.resultTitle)
        console.log(ary)
        return ary
      },
      ...mapGetters([
        'sidebar',
        'language'
      ])
    },
    watch: {
      'sidebar.opened': function () {
        this.resizeAllEcharts()
      },
      'language': function (params) {
        if (params === 'en') {
          this.tags = this.enTags
          this.tagTips = this.enTagTips
        } else if (params === 'zh') {
          this.tags = this.zhTags
          this.tagTips = this.zhTagTips
        }
      },
      endDate (val) {
        // this.drawAllEcharts(this.initParams())
        this.drawSellInAll(this.initParams())
      },
      startDate (val) {
        this.drawSellInAll(this.initParams())
      }
    },
    methods: {
      initParams () {
        return {
          "username": getUsername(),
          "geos":this.geoValue,
          "countrys":this.countryValue,
          "segment":this.segmentTypeValue,
          "material_num":this.mtmValue,
          "from_scan_date":this.startDate,
          "to_scan_date":this.endDate,
          "ph_code_product":this.ph_code_product
        }
      },
      async initTag () {
        let res = await this.axios.post('/productfamily/getProdTag.do', {
          "username":getUsername(),
          "ph_code_product":this.ph_code_product
        })
        // tags
        this.enTags = res.data.data.product_target_en
        this.zhTags = res.data.data.product_target_zh
        this.enTagTips = res.data.data.product_target_tips_en
        this.zhTagTips = res.data.data.product_target_tips_zh
        if (this.language === 'zh') {
          this.tags = this.zhTags
          this.tagTips = this.zhTagTips
        } else if (this.language === 'en') {
          this.tags = this.enTags
          this.tagTips = this.enTagTips
        }
      },
      resizeAllEcharts () {
        let _this = this
        setTimeout(function () {
          _this.echart.sellIn.resize()
          _this.echart.GeoEcharts1.resize()
          _this.echart.SegmentEcharts1.resize()
          // _this.echart.MtmEcharts1.resize()
          // _this.echart.activate.resize()
          // _this.echart.GeoEcharts2.resize()
          // _this.echart.SegmentEcharts2.resize()
          // _this.echart.MtmEcharts2.resize()
          // _this.echart.inventory.resize()
          // _this.echart.GeoEcharts3.resize()
          // _this.echart.SegmentEcharts3.resize()
          // _this.echart.MtmEcharts3.resize()
        }, 200)
      },
      initEchartsDom () { // 初始化echarts图表
        this.echart.sellIn = this.echarts.init(document.getElementsByClassName('sell-echarts')[0], null, {renderer: 'canvas'})
        this.echart.GeoEcharts1 = this.echarts.init(document.getElementsByClassName('GeoEcharts1')[0], null, {renderer: 'canvas'})
        this.echart.SegmentEcharts1 = this.echarts.init(document.getElementsByClassName('SegmentEcharts1')[0], null, {renderer: 'canvas'})
        // this.echart.MtmEcharts1 = this.echarts.init(document.getElementsByClassName('MtmEcharts1')[0], null, {renderer: 'canvas'})
        // this.echart.activate = this.echarts.init(document.getElementsByClassName('sell-echarts')[1], null, {renderer: 'canvas'})
        // this.echart.GeoEcharts2 = this.echarts.init(document.getElementsByClassName('GeoEcharts1')[1], null, {renderer: 'canvas'})
        // this.echart.SegmentEcharts2 = this.echarts.init(document.getElementsByClassName('SegmentEcharts1')[1], null, {renderer: 'canvas'})
        // this.echart.MtmEcharts2 = this.echarts.init(document.getElementsByClassName('MtmEcharts1')[1], null, {renderer: 'canvas'})
        // this.echart.inventory = this.echarts.init(document.getElementsByClassName('sell-echarts')[2], null, {renderer: 'canvas'})
        // this.echart.GeoEcharts3 = this.echarts.init(document.getElementsByClassName('GeoEcharts1')[2], null, {renderer: 'canvas'})
        // this.echart.SegmentEcharts3 = this.echarts.init(document.getElementsByClassName('SegmentEcharts1')[2], null, {renderer: 'canvas'})
        // this.echart.MtmEcharts3 = this.echarts.init(document.getElementsByClassName('MtmEcharts1')[2], null, {renderer: 'canvas'})
      },
      drawAllEcharts (params) { // 渲染所有的echarts图表
        this.drawSellIn(params)
        this.sellInAndActDetails(params)
        this.sellInActivationValue(params)
        // this.drawActivate(params)
        // this.drawInventory(params)
        // this.acticationValue(params)
        // this.inventoryValue(params)
        // this.activateSpeedDetails(params)
        // this.inventoryDetails(params)
      },
      // 下拉框初始化
      initAllSelect () {
        this.initGeo()
        this.initCountry()
        this.initSegment()
        this.initTMT()
      },
      async initGeo () {
        let res = await this.axios.post('/productfamily/authGeoForSearch.do', {
          'username': getUsername(),
          'geos': []
        })
        let option = []
        for (let i = 0; i < res.data.data.geo.length; i++) {
          let obj = {}
          obj.value = res.data.data.geo[i]
          obj.label = res.data.data.geo[i]
          option.push(obj)
        }
        this.geoOptions = option
      },
      async initCountry () {
        let res = await this.axios.post('/productfamily/authCountryForSearch.do', {
          'username': getUsername()
        })
        let option = []
        for (let i = 0; i < res.data.data.country.length; i++) {
          let obj = {}
          obj.value = res.data.data.country[i]
          obj.label = res.data.data.country[i]
          option.push(obj)
        }
        this.countryOption = option
      },
      async initSegment (geos = [], countrys = []) {
        let res = await this.axios.post('/productfamily/segmentSelect.do', {
          'username': getUsername(),
          'geos': geos,
          'countrys': countrys,
          'material_num': [],
          'from_scan_date': '',
          'to_scan_date': '',
          'ph_code_product': this.ph_code_product
        })
        let option = []
        for (let i = 0; i < res.data.data.length; i++) {
          let obj = {}
          obj.value = res.data.data[i]
          obj.label = res.data.data[i]
          option.push(obj)
        }
        this.segmentTypeOption = option
      },
      async initTMT (geos = [], countrys = []) {
        let res = await this.axios.post('/productfamily/tmtSelect.do', {
          'username': getUsername(),
          'geos': geos,
          'countrys': countrys,
          'segment': ['CONS'], //
          'material_num': [],
          'from_scan_date': '',
          'to_scan_date': '',
          'ph_code_product': this.ph_code_product
        })
        let option = []
        for (let i = 0; i < res.data.data.length; i++) {
          let obj = {}
          obj.value = res.data.data[i]
          obj.label = res.data.data[i]
          option.push(obj)
        }
        this.mtmOption = option
      },
      // 下拉框联动
      async geoChange () {
        this.countryValue = []
        this.segmentTypeValue = []
        this.mtmValue = []
        if (this.geoValue.length === 0) {
          this.initCountry()
          this.initSegment()
          this.initTMT()
        } else {
          let res = await this.axios.post('/productfamily/authGeoForSearch.do', {
            'username': getUsername(),
            'geos': this.geoValue
          })
          let option = []
          for (let i = 0; i < res.data.data.country.length; i++) {
            let obj = {}
            obj.value = res.data.data.country[i]
            obj.label = res.data.data.country[i]
            option.push(obj)
          }
          this.countryOption = option
          this.initSegment(this.geoValue, this.countryValue)
          this.initTMT(this.geoValue, this.countryValue)
        }
        this.drawAllEcharts(this.initParams())
      },
      countryChange () {
        this.segmentTypeValue = []
        this.mtmValue = []
        this.initSegment(this.geoValue, this.countryValue)
        this.initTMT(this.geoValue, this.countryValue)
        this.drawAllEcharts(this.initParams())
      },
      segmentChange () {
        this.drawAllEcharts(this.initParams())
      },
      mtmChange () {
        this.drawAllEcharts(this.initParams())
      },
      // 初始化日期选择
      async initSelectDate () {
        let ary = []
        let res = await this.axios.post('/productfamily/scanDateList.do', {
          "username": getUsername(),
          "geos":[],
          "countrys":[],
          "segment":[],
          "material_num":[],
          "from_scan_date":"",
          "to_scan_date":"",
          "ph_code_product":this.ph_code_product
        })
        for (let i = 0; i < res.data.data.length; i++) {
          let obj = {}
          obj.label = res.data.data[i]
          obj.value = res.data.data[i]
          ary.push(obj)
        }
        this.ListingDate = res.data.data[0]
        this.startOptions = ary
        this.endOptions = ary
      },
      async changeStartDate () {
        let ary = []
        this.endDate = ''
        let res = await this.axios.post('/productfamily/scanDateList.do', {
          "username": getUsername(),
          "geos":[],
          "countrys":[],
          "segment":[],
          "material_num":[],
          "from_scan_date": this.startDate,
          "to_scan_date":"",
          "ph_code_product":this.ph_code_product
        })
        for (let i = 0; i < res.data.data.length; i++) {
          let obj = {}
          obj.label = res.data.data[i]
          obj.value = res.data.data[i]
          ary.push(obj)
        }
        this.endOptions = ary
      },
      drawSellInAll (params) {
        this.drawSellIn(params)
        this.sellInActivationValue(params)
        this.sellInAndActDetails(params)
      },
      // sellInActivation
      async drawSellIn (params) {
        this.loading.sellInActivation = true
        let res = await this.axios.post('/productfamily/sellinAndSelloutByScanDate.do', params)
        console.log('酒店客房酒店开房间')
        console.log(res)
        if (res.data.data.lin.value.length === 0) {
          this.noData.sellInActivation = true
        } else {
          this.noData.sellInActivation = false
        }
        let xAxis = res.data.data.name
        let series = []
        let color = ['rgba(182, 162, 222, 0.2)', 'rgba(0, 144, 233, 0.2)']
        for (let i = 0; i < res.data.data.lin.value.length-1; i++) {
          let obj = {
            name: res.data.data.lin.value[i].name,
            type:'line',
            stack: '总量',
            areaStyle: {
              color: color[i]
            },
            smooth: true,
            data: res.data.data.lin.value[i].value
          }
          series.push(obj)
        }
        let option = {
            color: ['#59c4e6', '#a274ff'],
            title: {
                text: ''
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            // legend: {
            //     data:['sellin', 'sellout'],
            //     left: 0
            // },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : xAxis
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : series
        };
        this.echart.sellIn.setOption(option)
        this.loading.sellInActivation = false
      },
      // sellin & activation右边的值
      async sellInActivationValue (params) {
        let res = await this.axios.post('/productfamily/sellInSumAndActSum.do', params)
        this.sellInActivation.sellIn = res.data.data.sellin
        this.sellInActivation.activation = res.data.data.activation
        // Sell In 部分右边的值
        this.sellNum.sellIn = res.data.data.sellin
        this.sellNum.activation = res.data.data.activation
      },
      // sellin下三个小图表加载
      async sellInAndActDetails (params) {
        this.loading.geo1 = true
        this.loading.segment1 = true
        this.loading.mtm1 = true
        let res = await this.axios.post('/productfamily/sellInAndActByDistribution.do', params)
        this.drawSellGeo(res.data.data.geo)
        this.drawSegment(res.data.data.segment)
        this.drawMTM(res.data.data.mtm)
      },
      drawSellGeo (data) {
        console.log(data, '1')
        let series = []
        let xAxis = []
        let index = []
        // xAxis = data.name
        if (data.sell_in_geo.value.length === 0) {
          this.noData.geo1 = true
        } else {
          this.noData.geo1 = false
        }
        for (let i = 0; i < this.geoDate.length; i++) { // 应该显示数据的索引值
          if (data.name.indexOf(this.geoDate[i]) !== -1) {
            index.push(data.name.indexOf(this.geoDate[i]))
          }
        }
        for (let i = 0; i < index.length; i++) { // 生成X轴数据的值
          xAxis.push(data.name[index[i]])
        }
        for (let i = 0; i < data.sell_in_geo.value.length; i++) { // 生成value值
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          let value = []
          for (let j = 0; j < index.length; j++) {
            value.push(data.sell_in_geo.value[i].value[index[j]])
          }
          obj.name = data.sell_in_geo.value[i].name
          obj.data = value
          series.push(obj)
          series.splice(1, 1)
        }
        // for (let i = 0; i < data.geo.value.length; i++) {
        //   let obj = {
        //     type:'bar',
        //     barMinHeight: 10
        //   }
        //   obj.name = data.geo.value[i].name
        //   obj.data = data.geo.value[i].value
        //   series.push(obj)
        // }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                position: function (pos, params, dom, rect, size) {
                  // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                  var obj = {top: 60};
                  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                  return obj;
                },
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    // min: 0,
                    // max: 250,
                    interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        this.echart.GeoEcharts1.setOption(option)
        this.loading.geo1 = false
      },
      drawSegment (data) {
        let series = []
        let xAxis = []
        xAxis = data.name
        if (data.ebr_segment.value.length === 0) {
          this.noData.segment1 = true
        } else {
          this.noData.segment1 = false
        }
        for (let i = 0; i < data.ebr_segment.value.length-1; i++) {
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          obj.name = data.ebr_segment.value[i].name
          obj.data = data.ebr_segment.value[i].value
          series.push(obj)
        }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    // min: 0,
                    // max: 250,
                    interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        this.echart.SegmentEcharts1.setOption(option)
        this.loading.segment1 = false
      },
      drawMTM (data) {
        // let series = []
        // let xAxis = []
        // xAxis = data.name
        // if (data.mtm.value.length === 0) {
        //   this.noData.mtm1 = true
        // } else {
        //   this.noData.mtm1 = false
        // }
        // for (let i = 0; i < data.mtm.value.length; i++) {
        //   let obj = {
        //     type:'bar',
        //     barMinHeight: 10
        //   }
        //   obj.name = data.mtm.value[i].name
        //   obj.data = data.mtm.value[i].value
        //   series.push(obj)
        // }
        // let option = {
        //     color: this.eChartsColor,
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: {
        //             type: 'cross',
        //             crossStyle: {
        //                 color: '#999'
        //             }
        //         }
        //     },
        //     legend: {
        //         data:[]
        //     },
        //     xAxis: [
        //         {
        //             type: 'category',
        //             data: xAxis,
        //             axisPointer: {
        //                 type: 'shadow'
        //             }
        //         }
        //     ],
        //     yAxis: [
        //         {
        //             type: 'value',
        //             // name: '',
        //             // min: 0,
        //             // // max: 250,
        //             // interval: 5,
        //             axisLabel: {
        //               show: false
        //             },
        //             axisLine: {
        //               show: false
        //             },
        //             splitLine: {
        //               show: false
        //             },
        //             axisTick: {
        //               show: false
        //             }
        //         }
        //     ],
        //     series: series
        // }
        // // this.echart.MtmEcharts1.setOption(option)
        // this.loading.mtm1 = false
      },
      async drawActivate (params) {
        this.loading.activateSpeed = true
        let res = await this.axios.post('/productfamily/actSpeedByActDurType.do', params)
        let xAxis = res.data.data.name
        let series = []
        if (res.data.data.lin.value.length === 0) {
          this.noData.activateSpeed = true
        } else {
          this.noData.activateSpeed = false
        }
        for (let i = 0; i < res.data.data.lin.value.length; i++) {
          let obj = {
            name: res.data.data.lin.value[i].name,
            type:'line',
            stack: '总量',
            smooth: true,
            data: res.data.data.lin.value[i].value
          }
          series.push(obj)
        }
        let option = {
            color: this.eChartsColor,
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['actProp','actAcc'],
                left: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                // feature: {
                //     saveAsImage: {}
                // }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: series
        }
        this.echart.activate.setOption(option)
        this.loading.activateSpeed = false
      },
      async acticationValue (params) {
        let res = await this.axios.post('/productfamily/actRateAndActAvgDur.do', params)
        this.acticate.rate = res.data.data.actRate
        this.acticate.avg = res.data.data.avgActDur
      },
      // act下三个小图表的加载
      async activateSpeedDetails (params) {
        this.loading.geo2 = true
        this.loading.segment2 = true
        this.loading.mtm2 = true
        let res = await this.axios.post('/productfamily/actSpeedByDistribution.do', params)
        this.drawSellGeo2(res.data.data.geo)
        this.drawSegment2(res.data.data.segment)
        this.drawMTM2(res.data.data.mtm)
      },
      drawSellGeo2 (data) {
        let series = []
        let xAxis = []
        let index = []
        // xAxis = data.name
        if (data.geo.value.length === 0) {
          this.noData.geo2 = true
        } else {
          this.noData.geo2 = false
        }
        for (let i = 0; i < this.geoDate.length; i++) { // 应该显示数据的索引值
          if (data.name.indexOf(this.geoDate[i]) !== -1) {
            index.push(data.name.indexOf(this.geoDate[i]))
          }
        }
        for (let i = 0; i < index.length; i++) { // 生成X轴数据的值
          xAxis.push(data.name[index[i]])
        }
        for (let i = 0; i < data.geo.value.length; i++) { // 生成value值
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          let value = []
          for (let j = 0; j < index.length; j++) {
            value.push(data.geo.value[i].value[index[j]])
          }
          obj.name = data.geo.value[i].name
          obj.data = value
          series.push(obj)
        }
        // for (let i = 0; i < data.geo.value.length; i++) {
        //   let obj = {
        //     type:'bar',
        //     barMinHeight: 10
        //   }
        //   obj.name = data.geo.value[i].name
        //   obj.data = data.geo.value[i].value
        //   series.push(obj)
        // }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                position: function (pos, params, dom, rect, size) {
                  // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                  var obj = {top: 60};
                  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                  return obj;
                },
                formatter: function (params) {
                  return params[0].axisValue + '<br>'
                         + '<div style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#59c4e6;"></div> ' + params[0].seriesName + ': ' + params[0].value + '%' + '<br/>'
                         + '<div style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#b6a2de;"></div> ' + params[1].seriesName + ': ' + params[1].value
                }
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    // min: 0,
                    // max: 250,
                    interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        this.echart.GeoEcharts2.setOption(option)
        this.loading.geo2 = false
      },
      drawSegment2 (data) {
        let series = []
        let xAxis = []
        xAxis = data.name
        if (data.segment.value.length === 0) {
          this.noData.segment2 = true
        } else {
          this.noData.segment2 = false
        }
        for (let i = 0; i < data.segment.value.length; i++) {
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          obj.name = data.segment.value[i].name
          obj.data = data.segment.value[i].value
          series.push(obj)
        }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                formatter: function (params) {
                  return params[0].axisValue + '<br>'
                         + '<div style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#59c4e6;"></div> ' + params[0].seriesName + ': ' + params[0].value + '%' + '<br/>'
                         + '<div style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#b6a2de;"></div> ' + params[1].seriesName + ': ' + params[1].value
                }
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    // min: 0,
                    // max: 250,
                    interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        this.echart.SegmentEcharts2.setOption(option)
        this.loading.segment2 = false
      },
      drawMTM2 (data) {
        let series = []
        let xAxis = []
        xAxis = data.name
        if (data.mtm.value.length === 0) {
          this.noData.mtm2 = true
        } else {
          this.noData.mtm2 = false
        }
        for (let i = 0; i < data.mtm.value.length; i++) {
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          obj.name = data.mtm.value[i].name
          obj.data = data.mtm.value[i].value
          series.push(obj)
        }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // name: '',
                    // min: 0,
                    // // max: 250,
                    // interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        // this.echart.MtmEcharts2.setOption(option)
        this.loading.mtm2 = false
      },
      async drawInventory (params) {
        this.loading.inventory = true
        let res = await this.axios.post('/productfamily/inventoryByInvAgeType.do', params)
        let xAxis = res.data.data.name
        let series = []
        if (res.data.data.bar.value.length === 0) {
          this.noData.inventory = true
        } else {
          this.noData.inventory = false
        }
        for (let i = 0; i < res.data.data.bar.value.length; i++) {
          let obj = {
            name: res.data.data.bar.value[i].name,
            type: 'bar',
            barMinHeight: 10,
            barWidth: '60%',
            data: res.data.data.bar.value[i].value
          }
          series.push(obj)
        }
        let option = {
          color: ['#59c4e6'],
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : xAxis,
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : series
        }
        this.echart.inventory.setOption(option)
        this.loading.inventory = false
      },
      async inventoryValue (params) {
        let res = await this.axios.post('/productfamily/inventorySumAndInvAge.do', params)
        this.inventory.inventory = res.data.data.inventory
        this.inventory.age = res.data.data.inventoryAge
      },
      // inventory下三个小图表的加载
      async inventoryDetails (params) {
        this.loading.geo3 = true
        this.loading.segment3 = true
        this.loading.mtm3 = true
        let res = await this.axios.post('/productfamily/inventoryByDistribution.do', params)
        this.drawSellGeo3(res.data.data.geo)
        this.drawSegment3(res.data.data.segment)
        this.drawMTM3(res.data.data.mtm)
      },
      drawSellGeo3 (data) {
        console.log(data, 'geoDate')
        let series = []
        let xAxis = [] // 横坐标的值
        let index = []
        let array = [
          {
            name: '',
            value: []
          },
          {
            name: '',
            value: []
          }
        ]
        // xAxis = data.name
        if (data.geo.value.length === 0) {
          this.noData.geo3 = true
        } else {
          this.noData.geo3 = false
        }
        for (let i = 0; i < this.geoDate.length; i++) { // 应该显示数据的索引值
          if (data.name.indexOf(this.geoDate[i]) !== -1) {
            index.push(data.name.indexOf(this.geoDate[i]))
          }
        }
        for (let i = 0; i < index.length; i++) { // 生成X轴数据的值
          xAxis.push(data.name[index[i]])
        }
        for (let i = 0; i < data.geo.value.length; i++) { // 生成value值
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          let value = []
          for (let j = 0; j < index.length; j++) {
            value.push(data.geo.value[i].value[index[j]])
          }
          obj.name = data.geo.value[i].name
          obj.data = value
          series.push(obj)
        }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                position: function (pos, params, dom, rect, size) {
                  // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                  var obj = {top: 60};
                  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                  return obj;
                },
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // name: '',
                    // min: 0,
                    // max: 250,
                    // interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        this.echart.GeoEcharts3.setOption(option)
        this.loading.geo3 = false
      },
      drawSegment3 (data) {
        let series = []
        let xAxis = []
        xAxis = data.name
        if (data.segment.value.length === 0) {
          this.noData.segment3 = true
        } else {
          this.noData.segment3 = false
        }
        for (let i = 0; i < data.segment.value.length; i++) {
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          obj.name = data.segment.value[i].name
          obj.data = data.segment.value[i].value
          series.push(obj)
        }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // name: '',
                    // min: 0,
                    // max: 250,
                    interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        this.echart.SegmentEcharts3.setOption(option)
        this.loading.segment3 = false
      },
      drawMTM3 (data) {
        let series = []
        let xAxis = []
        xAxis = data.name
        if (data.mtm.value.length === 0) {
          this.noData.mtm3 = true
        } else {
          this.noData.mtm3 = false
        }
        for (let i = 0; i < data.mtm.value.length; i++) {
          let obj = {
            type:'bar',
            barMinHeight: 10
          }
          obj.name = data.mtm.value[i].name
          obj.data = data.mtm.value[i].value
          series.push(obj)
        }
        let option = {
            color: this.eChartsColor,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:[]
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxis,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    // name: '',
                    // min: 0,
                    // // max: 250,
                    // interval: 5,
                    axisLabel: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
                    splitLine: {
                      show: false
                    },
                    axisTick: {
                      show: false
                    }
                }
            ],
            series: series
        }
        // this.echart.MtmEcharts3.setOption(option)
        this.loading.mtm3 = false
      }
    },
    filters: {
      comdify(n) {
        var re = /\d{1,3}(?=(\d{3})+$)/g;
        var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
          return s1.replace(re, "$&,") + s2
        })
        return n1
      },
    },
    mounted () {
      let _this = this
      window.onresize = function () {
        console.log('1234546564544545')
        _this.resizeAllEcharts()
      }
      // 同一接口，重复请求同一数据
      // this.axios.post('/productfamily/sellInSumAndActSum.do', {
      //   "username":getUsername(),
      //   "geos":[],
      //   "countrys":[],
      //   "segment":[],
      //   "material_num":[],
      //   "from_scan_date":"",
      //   "to_scan_date":"",
      //   "ph_code_product":this.ph_code_product
      // }).then(res => {
      //   this.sellNum.sellIn = res.data.data.sellin
      //   this.sellNum.activation = res.data.data.activation
      // })
      this.initTag()
      this.initEchartsDom()
      this.drawAllEcharts(this.initParams())
      this.initAllSelect()
      this.initSelectDate()
      // console.log(this.$route.query.resultTitle, 'rou')
    }
  }
</script>
<style lang="scss" scoped>
.productDetails{
  padding: 30px 46px 0 46px;
  .el-select{
    /*overflow:hidden;*/
    width: 160px !important;
  }
  .numDetails{
    ul{
      overflow: hidden;
      padding:0;
      margin:0;
      li{
        list-style-type: none;
        float:left;
        display: inline-block;
        padding:0;
        margin:0;
        line-height: 28px;
      }
    }
    li.name{
      font-family: 'Arial-BoldMT';
      font-size: 20px;
      color:#333;
      font-weight: bold;
      margin-right: 60px;
    }
    li.details{
      font-family: 'MicrosoftYaHei';
      font-size:16px;
      color:#999;
      margin-right: 80px;
    }
  }
  .numButton{
    margin: 30px 0 20px 0;

    div.btn{
      height:36px;
      min-width:120px;
      padding:0 5px;
      display: inline-block;
      margin-right:10px;
      font-family: 'MicrosoftYaHei';
      font-size:16px;
      color:#010101;
      background-color:#c1e7fe;
      border:1px solid #0090e9;
      border-radius: 4px;
      text-align: center;
      line-height: 36px;
      &:hover{
        cursor:pointer;
      }
    }
  }
  .fourSelect{
    span{
      display: inline-block;
      font-family: 'ArialMT';
      font-size:16px;
      color:#000;
      margin-left:1vw;
    }
  }
  .sellIn{
    margin-top:20px;
    width:100%;
    .title{
      font-family: 'Arial-BoldMT';
      font-size:18px;
      color:#333;
      font-weight: bold;
    }
    .number{
      height:80px;
      padding-left:110px;
      .name{
        font-family: 'ArialMT';
        font-size: 16px;
        color:#000;
        font-weight: bold;
        margin-top:30px;
      }
      .value{
        font-family: 'Arial-BoldMT';
        font-size:36px;
        color:#000;
        font-weight: bold;
      }
    }
    .sell{
      margin-top: 35px !important;
    }
    .top{
      margin-top:94px;
    }
    .title2{
      font-family: 'ArialMT';
      font-size:18px;
      color:#000;
      font-weight: bold;
      margin-left:37px;
      margin-top:40px;
    }
    .sell-echarts{
      height:300px;
      width:100%;
    }
    .sellInActivation{
      width:100%;
    }
    .GeoEcharts1, .SegmentEcharts1, .MtmEcharts1{
      height: 300px;
    }
  }
}
</style>
